<template>
  <div
    style="height: 100%"
    class="uni-scroll"
  >
    <el-table
      style="width: 100%"
      :data="onlineList"
      :show-header="false"
    >
      <el-table-column prop="status" :label="$t('status')" sortable>
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status=='ONLINE'" type="success">{{ formatDeviceStatus(scope.row.status) }}</el-tag>
          <el-tag v-else type="danger">{{ formatDeviceStatus(scope.row.status) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createdDate" :label="$t('time')" sortable>
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span style="margin-left: 13px">{{ formatDate(scope.row.createdDate) }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import BaseView from '../../BaseView'
import { formatDate, formatDeviceStatus } from '@/util/common'
import { pageGetDeviceStatus } from '@/api/iot/iotDeviceStatusApi'
import { getPageSize } from '@/util/storage'

export default {
  name: 'IotDeviceStatus',
  extends: BaseView,
  data() {
    return {
      onlineList: []
    }
  },
  mounted() {
    this.pageGetDeviceStatus()
  },
  methods: {
    formatDate(time) {
      return formatDate(this, time)
    },
    formatDeviceStatus(status) {
      return formatDeviceStatus(this, status)
    },
    pageGetDeviceStatus() {
      const timestamp = new Date().getTime()
      const startDate = new Date().getTime() - 7 * 24 * 60 * 60 * 1000
      const endDate = timestamp
      pageGetDeviceStatus({
        deviceId: this.detail.dataBind.deviceId,
        pageSize: getPageSize(),
        currentPage: 1,
        startDate: Math.round(startDate / 1000),
        endDate: Math.round(endDate / 1000)
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.onlineList = data.data
        }
      })
    }
  }
}
</script>

